{% extends 'layout/manage.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-select/css/bootstrap-select.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/select2/css/select2.min.css' %}">
    <style>
        .choose {
            border-left: 2px solid #f90 !important;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container clearfix" style="margin-top: 60px;">
        <div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-heading" style="background-color:transparent;font-weight: bold;">
                    个人中心
                </div>
                <div class="list-group" style="border-radius: 0">
                    <div>
                        <a href="#" class="list-group-item">我的资料</a>
                        <a href="#" class="list-group-item">修改密码</a>
                        <a href="{% url 'setting_delete'  project_id=request.tracer.project.id %}"
                           class="list-group-item choose">删除项目</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa fa-address-card-o" aria-hidden="true"></i> 删除项目</div>
                <div class="panel-body">

                    <form class="form-horizontal" method="post" id="delForm">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="{{ form.xmmc.id_for_label }}"
                                   class="col-sm-2 control-label">{{ form.xmmc.label }}</label>
                            <div class="col-sm-5">
                                {{ form.xmmc }}
                                <div class="error-msg"></div>
                            </div>
                            <div class="col-sm-2">
                                <input type="button" id="delBtn" class="btn btn-danger btn-sm" value="删 除">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-5">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-5">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-5">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2">

                            </div>
                            <div class="col-sm-5">

                            </div>
                        </div>

                    </form>

                </div>
            </div>

        </div>
    </div>
    <!-- 警告框 -->
    <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4>是否要确定删除？</h4>
                <p id="msg" style="padding-top: 20px;padding-bottom: 20px;">
                    项目包含的所有资料都将删除！！！
                </p>
                <p style="text-align: right;">
                    <a class="btn btn-default btn-sm" data-dismiss="modal" aria-label="Close">取 消</a>
                    <button id="btnDelete" type="button" class="btn btn-danger btn-sm">确 定</button>
                </p>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script src="{% static 'plugins/bootstrap-select/js/bootstrap-select.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-select/js/i18n/defaults-zh_CN.min.js' %}"></script>
    <script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>
    <script src="{% static 'plugins/select2/js/i18n/zh-CN.js' %}"></script>
    <script>
        var POST_DEL = "{% url 'setting_delete' project_id=request.tracer.project.id %}";
        $(function () {
            initBindDelBtn();
            initBindBtnDelete();
        });
        // 确定 按钮 弹出提示框
        function initBindDelBtn() {
            $("#delBtn").click(function () {
                //当选中某个要删除的项目后才弹出提示框
                if ($("#id_xmmc").val() != "") {
                    var xmmc = $("#id_xmmc option:selected").text();
                    var oldtext = "项目包含的所有资料都将删除！！！";
                    $("#msg").text("【"+xmmc+"】"+oldtext);
                    $("#alertModal").modal("show");
                }
            })
        }
        // 确定删除项目按钮
        function initBindBtnDelete() {
            $("#btnDelete").click(function () {
                $.ajax({
                    url: POST_DEL,
                    type: "POST",
                    data: $("#delForm").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            //删除成功，刷新页面
                            //console.log(res.status);
                            location.reload();
                        } else {
                            //删除失败
                            alert(res.errors);
                        }
                    }
                });
            })
        }
    </script>
{% endblock %}